import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../store";
import notLoginUrl from "../../assets/images/user.png";
import { useNavigate } from "react-router-dom";
const My = () => {
  const nickname = useSelector((state: RootState) => state.user.nickname);
  const avator = useSelector((state: RootState) => state.user.avator);
  const navigate = useNavigate();
  return (
    <div className="my">
      <div className="user">
        <img src={avator || notLoginUrl} alt="" />
        {avator ? (
          <h3>{nickname}</h3>
        ) : (
          <h3 onClick={() => navigate("/login")}>未登录， 请登录</h3>
        )}
      </div>
      <div className="card">
        <div className="card-top">
          <span>我的收藏</span>
          <span>我的点赞</span>
          <span>我的足迹</span>
        </div>
        <div className="card-content">
          <a href="#">
            <img src={require("../../assets/images/待付款.png")} alt="" />
            <span>待付款</span>
          </a>
          <a href="#">
            <img src={require("../../assets/images/待收货.png")} alt="" />
            <span>待收货</span>
          </a>
          <a href="#">
            <img src={require("../../assets/images/退换售后.png")} alt="" />
            <span>退换/售后</span>
          </a>
          <a href="#">
            <img src={require("../../assets/images/全部订单.png")} alt="" />
            <span>全部订单</span>
          </a>
        </div>
      </div>
      <div className="card">
        <div className="card-content">
          <a href="#">
            <img src={require("../../assets/images/优惠卷.png")} alt="" />
            <span>优惠卷</span>
          </a>
          <a href="#">
            <img src={require("../../assets/images/白条额度.png")} alt="" />
            <span>白条额度</span>
          </a>
          <a href="#">
            <img src={require("../../assets/images/京豆.png")} alt="" />
            <span>京豆</span>
          </a>
          <a href="#">
            <img src={require("../../assets/images/红包.png")} alt="" />
            <span>红包</span>
          </a>
          <a href="#">
            <img src={require("../../assets/images/全部资产.png")} alt="" />
            <span>全部资产</span>
          </a>
        </div>
      </div>
    </div>
  );
};

export default My;
